<template>
	<view class="page">

		<view class="titleImg">
			<!-- <image class="title titleImg" src="../../static/qc.png" mode=""></image> -->
		</view>
		<view class="myAddress">
			<view class="" @click="address">
				地址管理
			</view>
			<view class="">

			</view>
			<view class="">

			</view>
		</view>

		<view class="tab">
			<view class="" v-for="(item,i) in list" @click="to(i)">
				{{item.name}}
			</view>
		</view>
		<!-- 关于我们 -->
		<view class="">
			<!-- 			我们???我们是厂家!!! 从箱包原材料（皮革、五金...）再到各种工艺（缝纫、印花、油边）最后做成大家手里的包包。
			【严选质量、 无中间商、优品好物】 -->

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				borderColor: 'box-shadow: 0px 0px 20rpx red;',
				list: [{
						name: '待付款',
						path: "",
						img: ''
					},

					{
						name: '待发货',
						path: "",
						img: ''
					}, {
						name: '待收货',
						path: "",
						img: ''
					}, {
						name: '地址管理',
						path: "",
						img: ''
					}
				]
			};
		},
		created() {
			// this.move()
		},
		methods: {
			to(index) {
				if (index == 3) {
					uni.navigateTo({
						url: '/pages/uni-id-address/list'
					})
				} else {
					uni.navigateTo({
						url:'/pages/orderList/orderList'
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		// background: linear-gradient(to top, rgba(246, 194, 255, 0.2), rgba(253, 230, 255, 1)); //从下到上
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;

		background-size: cover;

		backdrop-filter: blur(30px);


	}

	.titleImg {
		margin-top: 20rpx;
		border-radius: 50%;
		transform: translateX(-50%);
		margin-left: 50%;
		width: 220rpx;
		height: 220rpx;

	}

	.title {
		border: 10rpx solid #ffffff;
	}

	.tab {
		margin-top: 90rpx;
		display: flex;
		justify-content: space-around;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #303030;


			.imgIcon {
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
				// border: 3rpx solid #a1a1a1;
				box-shadow: 0px 0px 20rpx #fff;
				transition: all 2s;
				position: relative;
				overflow: hidden;
			}

			.itemimg {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 50rpx;
				height: 50rpx;
			}

			.itemText {
				margin-top: 20rpx;
			}
		}
	}

	.qicheAdmin {
		animation: move 5s infinite;
	}

	@keyframes move {

		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}
</style>